@charset "utf-8";
@import "option_common/option_common";
.fashion{
   position: absolute;
   width: 100%;
   height: 100%;
   overflow: hidden;
    .fashion_back{
        img{
            width: 100%;
             height: 100%;
        }
    }
    .fashion_character{
        position: absolute;
        top: r(60px);
        left: r(20px);
        z-index: 1;
        animation: facharacter 1s linear   ;
       animation-fill-mode: forwards;
      animation-name:bounceInRight ;
      animation-delay:200ms;
        img{
            width: 66%;
        }
    }
    .fashion_man{
        position: absolute;
        top: r(290px);
        left: r(20px);
        z-index: 1;
         animation: man 1s linear ;
       animation-fill-mode: forwards;
         animation-name:bounceInLeft ;
        img{
            width: 100%;
        }
    }
    .fashion_lady{
        position: absolute;
        top: r(140px);
        right: r(-312px);
        animation: lady 1s linear ;
       animation-fill-mode: forwards;
         animation-name:bounceInRight ;
        img{
            width: 48%;
        }
    }
    .fashion_fly{
        position: absolute;
        top: r(360px);
        left: r(260px);
        z-index: 1;
        animation: fly 2s linear  infinite ;
       animation-fill-mode: forwards;
//    animation-name:bounceInRight ;
//    animation-delay:200ms;
        img{
            width: 50%;
        }
    }
}
@keyframes fly{
    0%{
    opacity: 0;
        transform: translateX(300px);
    }
    to{
        width: 100%;
        transform: translateX(-300px);
    }
}